<template>
    <div>
        <!-- 这是顶部滑动条 -->
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
                        <!-- 注意tap  只能在 MUI组件中使用 -->
						<a :class="['mui-control-item',item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap = "getPhotoList(item.id)">
							{{item.title}}
						</a>
						
					</div>
				</div>

		</div>
        <ul class="photo-list">
            <router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/'+item.id" tag="li">
                <img v-lazy="item.img_url">
                <div class="info">
                    <h1 class="info-title">
                        {{item.title}}
                    </h1>
                    <div class="info-body">
                         {{item.zhaiyao}}
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
// 导入muijs文件
import mui from '../../lib/mui/js/mui.min.js'
// // 初始化控件
// mui('.mui-scroll-wrapper').scroll({
// 	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// });
export default {
    data(){
        return {
            cates:[],//所有分类的列表数组
            list:[],//图片列表的数组
        }
    },
    created(){
         this.getAllCategory()
         this.getPhotoList(0)
    },
    mounted(){
        // 初始化控件
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods:{
        getAllCategory(){
            // 获取所有图片分类
            this.$http.get('api/getimgcategory').then(result => {
                if(result.body.status == 0)
                {
                    result.body.message.unshift({title:"全部",id:0})
                    this.cates = result.body.message
                }
            })
        },
        getPhotoList(cateid){
            this.$http.get('api/getimages/'+cateid).then(result => {
                if(result.body.status == 0){
                    this.list = result.body.message
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    *{
        touch-action: pan-y;
    }
 .photo-list{
        list-style:none;
        padding:5px 10px;
        margin:5px 0;
        li{
            text-align:center;
            // background-color:#ddd;
            position:relative;
            img{
                width:100%;
            }
            img[lazy=loading] 
            {
                width: 40px;
                height: 300px;
                margin: auto;
             }
             .info{
                 color:white;
                 position:absolute;
                 background-color:rgba(0,0,0,0.4);
                 bottom:0;
                 max-height:84px;
                 overflow:hidden;
                 .info-title{
                     font-size:14px;
                 }
                 .info-body{
                     text-align:left;
                    font-size:12px;
                 }
             }
        }

    }
  
</style>